<template>
    <div class="portList">
        <Row :gutter="10" type="flex" class="timeList">
            <Col>
                <RadioGroup
                    v-model="switchTime"
                    type="button"
                    @on-change="switchList"
                >
                    <Radio label="0">今天</Radio>
                    <Radio label="1">昨天</Radio>
                    <Radio label="2">7天</Radio>
                    <Radio label="3">月</Radio>
                </RadioGroup>
            </Col>
            <Col v-bind="grid">
                <DatePicker
                    :options="options"
                    v-width="'100%'"
                    @on-change="timeChange"
                    type="daterange"
                    v-model="ruleFrom.time"
                    placeholder="日期选择"
                />
            </Col>
            <Col v-bind="grid">
                <Select
                    v-model="ruleFrom.profession_id"
                    placeholder="请选择"
                    @on-change="personalStatus"
                >
                    <Option
                        v-for="item in profession_list"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.profession_name }}
                    </Option>
                </Select>
            </Col>
        </Row>
        <Card dis-hover>
            <Table
                size="small"
                @on-cell-click="cellClick"
                ref="table"
                border
                :columns="columns"
                :data="tdata"
                :loading="loading"
                :show-summary="true"
                :summary-method="handleSummary"
            >
            </Table>
        </Card>
        <list-detail ref="drawerList"></list-detail>
    </div>
</template>

<script>
import { getBeforeDate } from "@/utils/datetime";
import { gettimeReportList, getReportListinfo } from "@/api/report";
import dayjs from "dayjs";
import $ from "jquery";
import ListDetail from "./module/table-list";
export default {
    name: "returnVisit",
    components: {
        ListDetail,
    },
    data() {
        return {
            ruleFrom: {
                member_id: "",
                time: [],
                profession_id: "1",
            },
            grid: {
                xl: 4,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24,
            },
            tdata: [],
            loading: false,
            oldColumns: [
                {
                    title: "诊室",
                    key: "clinic_name",
                    minWidth: 90,
                    align: "center",
                    className: "nodePoint",
                },
            ],
            profession_list: [],
            columns: [
                {
                    title: "回访人",
                    key: "member_name",
                    minWidth: 118,
                    fixed: "left",
                    align: "center",
                },
                {
                    title: "总次数",
                    key: "callback_num",
                    minWidth: 90,
                    fixed: "left",
                    align: "center",
                },
                {
                    title: "总人数",
                    key: "callback_patient_num",
                    minWidth: 90,
                    fixed: "left",
                    align: "center",
                },
                {
                    title: "正常回访比例",
                    key: "normal_callback_rate",
                    minWidth: 110,
                    align: "center",
                    className: "nodePoint",
                    render: (h, params) => {
                        let row = params.row;
                        return h("span", {}, row.normal_callback_rate + "%");
                    },
                },
                {
                    title: "诊室",
                    key: "clinic_name",
                    minWidth: 90,
                    align: "center",
                    className: "nodePoint",
                },
                {
                    title: "回访状态",
                    minWidth: 90,
                    align: "center",
                    children: [],
                },

                {
                    title: "回访方式",
                    minWidth: 90,
                    align: "center",
                    children: [],
                },
                {
                    title: "数据年份",
                    minWidth: 90,
                    align: "center",
                    children: [],
                },
            ],
            total: [],
            switchTime: "0",
            nowDayTime: "",
            nowMonthOn: "",
            servenTime: "",
            yesterdayT: "",
            options: {
                disabledDate(pick) {
                    const curDate = new Date();
                    let reVal = 0;
                    if (pick > curDate) {
                        reVal = 1;
                    }
                    return reVal;
                },
            },
            status: true,
        };
    },
    created() {
        this.getNowDay();
    },
    async mounted() {
        await this.getOneType();
        await this.getLoad();
    },
    methods: {
        getOneType() {
            return getReportListinfo().then((res) => {
                if (res.profession_type === 0) {
                    this.ruleFrom.profession_id = 2;
                } else if (res.profession_type === 1) {
                    this.ruleFrom.profession_id = 1;
                } else {
                    this.ruleFrom.profession_id = 2;
                }
                console.log(res);
                this.profession_list = res.profession_list;
            });
        },
        resetData() {
            if (this.status) {
                if (this.ruleFrom.profession_id === 1) {
                    this.columns.splice(4, 1);
                }
                this.status = false;
            }
            this.columns[this.getNumber(5)].children = [];
            this.columns[this.getNumber(6)].children = [];
            this.columns[this.getNumber(7)].children = [];
            this.total = {};
            this.tdata = [];
        },
        handleSummary({ columns, data }) {
            const sums = {};
            columns.forEach((column, index) => {
                const key = column.key || column.slot;
                if (index === 0) {
                    sums[key] = {
                        key,
                        value: "合计",
                    };
                    return;
                }
                sums[key] = {
                    key,
                    value: this.total[key],
                };
            });
            return sums;
        },
        getConfig() {
            return {
                member_id: this.ruleFrom.member_id,
                start_time:
                    this.ruleFrom.time[0] !== ""
                        ? dayjs(this.ruleFrom.time[0]).format("YYYY-MM-DD")
                        : "",
                end_time:
                    this.ruleFrom.time[1] !== ""
                        ? dayjs(this.ruleFrom.time[1]).format("YYYY-MM-DD")
                        : "",
                profession_id: this.ruleFrom.profession_id,
            };
        },
        getLoad() {
            const config = this.getConfig();
            this.loading = true;
            $(".tbActive").removeClass("tbActive");
            gettimeReportList(config)
                .then((res) => {
                    this.resetData();
                    // if (res.list.length === 0) {
                    //     return false
                    // }
                    const way = this.reduceList(res.total.callback_way, "way");
                    const state = this.reduceList(
                        res.total.callback_state,
                        "state"
                    );
                    const year = this.reduceList(
                        res.total.callback_year,
                        "year"
                    );
                    this.total = { ...res.total, ...way, ...state, ...year };
                    this.setColums(res);
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.loading = false;
                    });
                });
        },
        setColums(item) {
            // if (item.list.length === 0) return false
            let way = this.renderHeader(
                item.condition.callback_way_list,
                "way"
            );
            let status = this.renderHeader(
                item.condition.callback_status_list,
                "state"
            );
            let year = this.renderHeader(item.condition.year_list, "year");
            let data = [];
            if (item.list.length !== 0) {
                for (let i = 0; i < item.list.length; i++) {
                    const way = item.list[i].callback_way;
                    const state = item.list[i].callback_state;
                    const year = item.list[i].callback_year;
                    data.push({
                        ...item.list[i],
                        ...this.reduceList(way, "way"),
                        ...this.reduceList(state, "state"),
                        ...this.reduceList(year, "year"),
                    });
                }
            }
            this.$nextTick(() => {
                this.columns[this.getNumber(5)].children = status;
                this.columns[this.getNumber(6)].children = way;
                this.columns[this.getNumber(7)].children = year;
                this.tdata = data;
            });
        },
        getNumber(n) {
            return n - (this.ruleFrom.profession_id === 1 ? 1 : 0);
        },
        renderHeader(list = [], key) {
            let item = [];
            for (let i = 0; i < list.length; i++) {
                item.push({
                    title: key === "year" ? list[i] : list[i].name,
                    key: key === "year" ? list[i] + key : list[i].id + key,
                    minWidth: 90,
                });
            }
            return item;
        },
        reduceList(data = {}, key) {
            let obj = {};
            for (let i in data) {
                obj[i + key] = data[i];
            }
            return obj;
        },
        switchList(e) {
            switch (e) {
                case "0":
                    this.ruleFrom.time = [this.nowDayTime, this.nowDayTime];
                    break;
                case "1":
                    this.ruleFrom.time = [this.yesterdayT, this.yesterdayT];
                    break;
                case "2":
                    this.ruleFrom.time = [this.servenTime, this.nowDayTime];
                    break;
                case "3":
                    this.ruleFrom.time = [this.nowMonthOn, this.nowDayTime];
                    break;
                default:
                    this.ruleFrom.time = [this.nowDayTime, this.nowDayTime];
                    this.switchTime = "0";
                    break;
            }
            this.getLoad();
        },
        timeChange(e) {
            if (!e) {
                this.resetData();
                return false;
            }
            const startTime = e[0] || "";
            const endTime = e[1] || "";
            const nowDay = dayjs(this.nowDayTime).format("YYYY-MM-DD"); // 当天
            const nowMonthStart = dayjs(this.nowMonthOn).format("YYYY-MM-DD"); // 当月第一天
            const nowMonthEnd = dayjs(this.servenTime).format("YYYY-MM-DD"); // 7天前
            const nowYearStart = dayjs(this.yesterdayT).format("YYYY-MM-DD"); // 昨天
            if (startTime === nowDay && endTime === nowDay) {
                this.switchTime = "0";
            } else if (startTime === nowYearStart && endTime === nowDay) {
                this.switchTime = "1";
            } else if (startTime === nowMonthEnd && endTime === nowDay) {
                this.switchTime = "2";
            } else if (startTime === nowMonthStart && endTime === nowDay) {
                this.switchTime = "3";
            } else {
                this.switchTime = "";
            }
            this.getLoad();
        },
        personalStatus(e) {
            if (this.ruleFrom.profession_id === 2) {
                this.columns.splice(4, 0, this.oldColumns[0]);
            } else {
                this.columns.splice(4, 1);
            }
            this.$nextTick(() => {
                this.getLoad();
            });
        },
        // 昨天 7天 月
        getNowDay() {
            const now = new Date();
            const nowMonth = now.getMonth();
            const nowYear = now.getFullYear();
            const time = new Date().getTime() - 24 * 60 * 60 * 1000;
            this.yesterdayT = new Date(time);
            this.nowDayTime = now;
            this.nowMonthOn = new Date(nowYear, nowMonth, 1);
            this.servenTime = getBeforeDate(6);
            this.ruleFrom.time = [this.nowDayTime, this.nowDayTime];
        },
        // 点击弹出侧边栏
        handleOpenDrawer(row) {
            const { callback_member_id } = row;
            this.$refs.drawerList.handleDrawer(
                callback_member_id,
                this.ruleFrom
            );
        },
        // 全局点击事件
        cellClick(row, column, data, e) {
            if (
                column.key === "clinic_name" ||
                column.key === "normal_callback_rate"
            )
                return false;
            const that = e.target;
            const params = {
                member_id: row.callback_member_id,
                callback_way_id: "", // 回访状态
                callback_state_id: "", // 回访状态
                reg_time: "", // 回访年份
            };
            // console.log('===========>',params)
            this.ruleFrom.member_id = row.member_id;
            if (column.key.indexOf("way") !== -1) {
                params.callback_way_id = column.key.split("way")[0];
            } else if (column.key.indexOf("state") !== -1) {
                params.callback_state_id = column.key.split("state")[0];
            } else if (column.key.indexOf("year") !== -1) {
                params.reg_time = column.key.split("year")[0];
            }
            // console.log('===========>', params)

            $(".tbActive").removeClass("tbActive");
            $(that)
                .parent()
                .addClass("tbActive");
            this.$refs.drawerList.handleDrawer(params, this.ruleFrom);
        },
        // nums(row) {
        //     return parseInt((row.callback_patient_num / this.total.callback_patient_num) * 10000)/100
        // }
    },
};
</script>

<style leng="less" scoped>
.timeList {
    padding-top: 16px;
    margin-bottom: 16px;
}

/deep/.ivu-table-header thead tr th .ivu-table-cell,
/deep/.ivu-table-fixed-header thead tr th .ivu-table-cell {
    height: auto;
    line-height: normal;
}

/deep/.ivu-table-cell {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

/deep/.ivu-table-summary .ivu-table-cell {
    cursor: text;
}

/deep/.ivu-table thead tr th .ivu-table-cell {
    cursor: text;
}
</style>
